// Reset wrapper
#login-page #wrapper {
	width: auto;
	margin: 0;
	padding: 30px 0;
	text-align: center;
}

// Header
#login-page #header {
	text-align: center;
}

	#login-page #header h1 {
		margin: 0 0 30px;

		font-weight: bold;
		font-size: 64px;
		letter-spacing: -.05em;
	}

		#login-page #header h1 a {
			color: #fefefe;
			text-shadow: -1px -1px 1px rgba(0, 0, 0, .6);
		}

	#login-page #header p {
		@include a11y-hide;
	}

// Circle
#circle-stage {
	padding-bottom: 100px;
}

	#circle-mover {
		// Only used by JS for moving the circle in x, y, z
	}

		// The actual circle
		#circle {
			width: 320px;
			margin: 0 auto;
		}

			// User modules
			#circle > * {
				@include box;

				width: 260px;
				text-align: left;

				@include box-reflect(below, 5px, 25%);
			}

				#circle > * input:not([type=submit]):not([type=checkbox]) {
					width: 250px;
				}

// Navigation
#login-navigation {
	text-align: center;
	margin: 0 0 10px;
}

	#login-navigation ul {
		@include box;
		display: inline-block;
		min-width: 320px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

		#login-navigation ul li {
			display: inline-block;
			margin: 0;
		}

			#login-navigation ul li a {
				display: block;
				padding: 5px 15px;
			}

			#login-navigation ul li a:hover {
				text-decoration: none;
			}

			#login-navigation ul li a.jquery-3d-circle-selected {
				font-weight: bold;
			}

// Theme switcher
#login-theme-switcher {
	position: absolute;
	right: 10px;
	top: 10px;
	text-align: center;
}

html:not(.user-auth-level-0) #login-theme-switcher {
	top: 40px;
}

	#login-theme-switcher h2 {
		@include a11y-hide;
	}

		#login-theme-switcher ul {

		}

			#login-theme-switcher ul li {
				display: inline-block;
				margin: 5px;
			}

				#login-theme-switcher ul li a {
					@include box;
					padding: 0;
					width: 15px;
					height: 15px;
					text-indent: -1000000px;
					outline: 0;
				}

// Light themes
#login-page body {
	background: url(http://exscale.se/__files/uploads/Tiger-Aqua-Blue-OSX.jpg) 50% 50% no-repeat fixed;
	color: #333;
	text-shadow: none;

	@include transition(background-image 1s);
}

	#login-page body a {
		color: #333;
	}

#login-page body.osx {
	background: url(http://exscale.se/__files/uploads/Tiger-Aqua-Blue-OSX.jpg) 50% 50% no-repeat fixed;
}

#login-page body.bright-and-shiny {
	background: url(http://www.portwallpaper.com/imgwal/bright-and-shiny.jpg) 50% 50% no-repeat fixed;
}

#login-page body.planet-sky-bright {
	background: url(http://www.wallpapergate.com/data/media/4113/Planet_Skeye_Bright_38758.jpg) 50% 50% no-repeat fixed;
}

#login-page body.bright-fantasy-worldwide {
	background: url(http://www.hdwallpapers.in/walls/bright_fantasy_world-wide.jpg) 50% bottom no-repeat fixed;
}

#login-page body.too-bright-grass {
	background: url(http://www.wallpaperpimper.com/wallpaper/Landscape/Plant/Too-Bright-Grass-1-1600x1200.jpg) 50% bottom no-repeat fixed;
}

#login-page body.beautiful-sea {
	background: url(http://sky-wallpaper.com/uploads/2010-12/beautiful-sea-scenery-wallpaper/1292590258-S0MLU28.jpg) 50% 50% no-repeat fixed;
}

#login-page body.bright-blue-water {
	background: url(http://images.paraorkut.com/img/wallpapers/1024x768/b/bright_blue_water-1505.jpg) 50% bottom no-repeat fixed;
}

// Dark themes
#login-page body.life {
	background: url(http://exscale.se/__files/uploads/Life.jpg) 50% 50% no-repeat fixed;
	color: #f3f9f3;
	text-shadow: 1px 1px 1px rgba(60, 60, 60, .6);
}

	#login-page body.life a {
		color: #f3f9f3;
	}

#login-page body.clown-fish {
	background: url(http://exscale.se/__files/uploads/Clown-Fish.jpg) 50% 50% no-repeat fixed;
	color: #f3f9f3;
	text-shadow: 1px 1px 1px rgba(60, 60, 60, .6);
}

	#login-page body.clown-fish a {
		color: #f3f9f3;
	}
